{% extends 'myhome/base.html' %}

{% block con %}

<!-- slider-area-start -->
<div class="slider-area">
    <div class="slider-active owl-carousel">
        <div class="single-slider pt-125 pb-130 bg-img" style="background-image:url(/static/myhome/assats/img/slider/1.jpg);">
            <div class="container">
                <div class="row">
                    <div class="col-md-5">
                        <div class="slider-content slider-animated-1 text-center">
                            <h1>Huge Sale</h1>
                            <h2>koparion</h2>
                            <h3>Now starting at £99.00</h3><a href="#">Shop now</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="single-slider slider-h1-2 pt-215 pb-100 bg-img" style="background-image:url(/static/myhome/assats/img/slider/2.jpg);">
            <div class="container">
                <div class="slider-content slider-content-2 slider-animated-1">
                    <h1>We can help get your</h1>
                    <h2>Books in Order</h2>
                    <h3>and Accessories</h3><a href="#">Contact Us Today!</a>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- slider-area-end -->

<!-- featured-area-start -->
<div class="new-book-area pt-100">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="section-title section-title-res text-center mb-30">
                    <h2>所有图书</h2>
                </div>
            </div>
        </div>
        <div class="tab-active owl-carousel">
            {% for i in books %}
            <div class="tab-total">
                <!-- single-product-start -->
                <div class="product-wrapper">
                    <div class="product-img">
                        <a href="#">
                            <img style="width: 150px;height: 200px" src="\{{ i.bookimgs_set.first.img_url }}" alt="book" class="primary" />
                        </a>

                        <div class="product-flag">
                            <ul>
                                <li><span class="sale">新品</span><br></li>
                            </ul>
                        </div>
                    </div>
                    <div class="product-details text-center">
                        <div class="product-rating">
                            <ul>
                                <li><a href="#"><i class="fa fa-star"></i></a></li>
                                <li><a href="#"><i class="fa fa-star"></i></a></li>
                                <li><a href="#"><i class="fa fa-star"></i></a></li>
                                <li><a href="#"><i class="fa fa-star"></i></a></li>
                                <li><a href="#"><i class="fa fa-star"></i></a></li>
                            </ul>
                        </div>
                        <h4><a href="{% url 'myhome_detail' i.id %}">{{ i.title }}</a></h4>
                        <div class="product-price">
                            <ul>
                                <li>￥{{ i.price }}</li>
                            </ul>
                        </div>
                    </div>
                    <div class="product-link">
                        <div class="product-button"><a id="addcart" href="javascript:void(0)" title="Add to cart"><i class="fa fa-shopping-cart"></i>加入购物车</a></div>
                        <div class="add-to-link">
                            <ul>
                                <li><a href="{% url 'myhome_detail' i.id %}" title="Details"><i class="fa fa-external-link"></i></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!-- single-product-end -->
            </div>
            {% endfor %}
        </div>
    </div>
</div>
<!-- featured-area-start -->

<!-- social-group-area-start -->
<div class="social-group-area ptb-60">
    <div class="container">
        <div class="row">
            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                <div class="section-title-3">
                    <h3>Latest Tweets</h3>
                </div>
                <div class="twitter-content">
                    <div class="twitter-icon"><a href="#"><i class="fa fa-twitter"></i></a></div>
                    <div class="twitter-text">
                        <p>Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum notare quam</p><a href="#">posthemes</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                <div class="section-title-3">
                    <h3>Stay Connected</h3>
                </div>
                <div class="link-follow">
                    <ul>
                        <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                        <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
                        <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                        <li><a href="#"><i class="fa fa-youtube"></i></a></li>
                        <li><a href="#"><i class="fa fa-flickr"></i></a></li>
                        <li class="hidden-sm"><a href="#"><i class="fa fa-vimeo"></i></a></li>
                        <li class="hidden-sm"><a href="#"><i class="fa fa-instagram"></i></a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div><!-- social-group-area-end -->
<!-- footer-area-start -->
{% endblock %}
